<div class="doc-content">



<header class="api-profile-header" >
  <h2 class="md-display-1" >{{currentDoc.name}} API Documentation</h2>
  
</header>



<div layout="row" class="api-options-bar with-icon"></div>


<div class="api-profile-description">
  <p>The checkbox directive is used like the normal <a href="https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D">angular checkbox</a>.</p>
<p>As per the <a href="http://www.google.com/design/spec/style/color.html#color-color-schemes">material design spec</a>
the checkbox is in the accent color by default. The primary color palette may be used with
the <code>md-primary</code> class.</p>

</div>


<div>
  

  

  
  <section class="api-section">
    <h2 id="Usage">Usage</h2>
  
    <hljs lang="html">
<md-checkbox ng-model="isChecked" aria-label="Finished?">
  Finished ?
</md-checkbox>

<md-checkbox md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
  No Ink Effects
</md-checkbox>

<md-checkbox ng-disabled="true" ng-model="isDisabled" aria-label="Disabled">
  Disabled
</md-checkbox>

</hljs>
  
  </section>
  
  <div class="api-param-section">
    <h2>
      
        Attributes
      
    </h2>
    <div class="api-param-table">
      
<table class="md-api-table">
  <thead>
    <tr>
      <th>Parameter</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
  
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          <b>* ng-model</b>
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Assignable angular expression to data-bind to.</p>

          
        </td>
      </tr>
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
    
  
  
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          name
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Property name of the form under which the control is published.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          ng-true-value
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-expression">expression</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-expression">expression</code></td>
        <td class="description">
          <p>The value to which the expression should be set when selected.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          ng-false-value
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-expression">expression</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-expression">expression</code></td>
        <td class="description">
          <p>The value to which the expression should be set when not selected.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          ng-change
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Angular expression to be executed when input changes due to user interaction with the input element.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-no-ink
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-boolean">boolean</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-boolean">boolean</code></td>
        <td class="description">
          <p>Use of attribute indicates use of ripple ink effects</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          aria-label
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-string">string</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-string">string</code></td>
        <td class="description">
          <p>Adds label to checkbox for accessibility.
    Defaults to checkbox&#39;s text. If no default text is found, a warning will be logged.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          md-indeterminate
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-expression">expression</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-expression">expression</code></td>
        <td class="description">
          <p>This determines when the checkbox should be rendered as &#39;indeterminate&#39;.
    If a truthy expression or no value is passed in the checkbox renders in the md-indeterminate state.
    If falsy expression is passed in it just looks like a normal unchecked checkbox.
    The indeterminate, checked, and unchecked states are mutually exclusive. A box cannot be in any two states at the same time.
    Adding the &#39;md-indeterminate&#39; attribute overrides any checked/unchecked rendering logic.
    When using the &#39;md-indeterminate&#39; attribute use &#39;ng-checked&#39; to define rendering logic instead of using &#39;ng-model&#39;.</p>

          
        </td>
      </tr>
    
  
    
      <tr class="api-params-item">
        <td style="white-space: nowrap;">
          ng-checked
          
          <span hide show-sm>
<code class="api-type label type-hint type-hint-expression">expression</code></span>
        </td>
        <td style="white-space: nowrap;">
<code class="api-type label type-hint type-hint-expression">expression</code></td>
        <td class="description">
          <p>If this expression evaluates as truthy, the &#39;md-checked&#39; css class is added to the checkbox and it
    will appear checked.</p>

          
        </td>
      </tr>
    
  

  </tbody>
</table>

    </div>
  </div>
  


  
</div>


</div>
